import { EventDetail } from '@/api';
import { OrderStatus } from '@/api/order';
import StatusIconPrimary from '@/components/StatusIconPrimary';
import { Skeleton } from '@antmjs/vantui';
import { Image, Text, View } from '@tarojs/components';
import Taro, { useRouter } from '@tarojs/taro';
import { useRequest } from 'taro-hooks';
import './index.module.less';

const STATE_MAP = {
  0: {
    bg: 'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/order-bar-paid.png',
    icon: 'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/icon-time.svg?v=1.0.0',
    label: '待核销',
  },
  2: {
    bg: 'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/order-bar-cancel.png',
    icon: 'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/order-bar-icon-cancel.svg',
    label: '已取消',
  },
  1: {
    bg: 'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/order-bar-success.png',
    icon: 'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/order-bar-icon-success.svg',
    label: '已完成',
  },
};

export default function Page() {
  const router = useRouter();

  const { data: detail, loading } = useRequest(() =>
    EventDetail({ event_id: router?.params?.id! })
  );

  if (loading)
    return (
      <View className=' pt-4'>
        <Skeleton title={true} row='3' />
      </View>
    );
  return (
    <View className=' min-h-screen overflow-hidden p-2'>
      {/* order status bar */}
      <View
        className='w-full h-[100px] pt-[16px] px-4 flex items-start'
        style={{
          backgroundImage: `url(${
            detail?.order_status === 0
              ? STATE_MAP[OrderStatus.待预约].bg
              : STATE_MAP[detail?.order_status || OrderStatus.已作废].bg
          })`,
          backgroundSize: '100% 100%',
        }}
      >
        <View className='mt-1'>
          {detail?.order_status === 2 && <StatusIconPrimary color='cancel' />}
          {detail?.order_status === 1 && <StatusIconPrimary color='success' />}
          {detail?.order_status === 0 && <StatusIconPrimary color='warning' />}
        </View>

        <View
          className='w-[44px] h-[44px] bg-cover mr-2 translate-y-[5px] ml-auto'
          style={{
            backgroundImage: `url(${
              detail?.order_status === 0
                ? STATE_MAP[OrderStatus.待预约].icon
                : STATE_MAP[detail?.order_status || OrderStatus.已作废].icon
            })`,
          }}
        />

        <Text className=' text-[36px] font-bold text-black'>
          {detail?.order_status === 0
            ? STATE_MAP[OrderStatus.待预约].label
            : STATE_MAP[detail?.order_status || OrderStatus.已作废].label}
        </Text>
      </View>

      <View
        className='p-4 bg-white flex relative -mt-[20px] rounded-lg'
        onClick={() => {
          Taro.navigateTo({
            url: `/pages/activity/detail?id=${router?.params?.id}`,
          });
        }}
      >
        {detail?.img && (
          <Image
            mode='aspectFill'
            src={detail?.img}
            className=' rounded-lg bg-cover bg-slate-500 w-[240px] h-[176px] mr-3'
          />
        )}

        <View className='flex-1'>
          <Text className=' font-bold text-[36px] text-black'>
            {detail?.title}
          </Text>
          <Text className='text-xs  text-gary3 block mt-1'>
            {detail?.subtitle}
          </Text>

          <View className='flex justify-end items-center text-primary'>
            <Text className=' text-2xl font-bold mr-1'>{detail?.beans}</Text>
            <Text className=' text-xs'>帮豆</Text>
          </View>
        </View>
      </View>

      {/* order info */}
      <View className=' bg-white p-4 rounded-lg relative mt-4 text-xs'>
        <Text className=' font-bold text-base text-black block mb-4'>
          订单信息
        </Text>
        <View className=' space-y-1'>
          <View className='flex'>
            <Text className='text-gary3'>订单编号：</Text>
            <View className='flex-1 break-all block'>{detail?.no}</View>
            <Text
              className=' ml-auto text-[#1677FF]'
              onClick={() => {
                if (!detail?.no) return;
                Taro.setClipboardData({
                  data: detail?.no,
                });
              }}
            >
              复制
            </Text>
          </View>
          <View>
            <Text className='text-gary3'>创建时间：</Text>
            {detail?.create_time}
          </View>
          <View>
            <Text className='text-gary3'>支付时间：</Text>
            {detail?.create_time}
          </View>
          <View>
            {detail?.verify_time && (
              <>
                <Text className='text-gary3'>完成时间：</Text>
                {detail.verify_time}
              </>
            )}
          </View>
        </View>
      </View>
    </View>
  );
}
